<template>
  <div class="container">
    <top :centerTitle="projectName"></top>
    <div class="bottom">
      <!-- 父容器的四个转角图片背景 -->
      <img class="leftUp" src="@/assets/aiScreen/leftUp.png" alt="left-up" />
      <img class="leftDown" src="@/assets/aiScreen/leftDown.png" alt="left-down" />
      <img class="rightUp" src="@/assets/aiScreen/rightUp.png" alt="right-up" />
      <img class="rightDown" src="@/assets/aiScreen/rightDown.png" alt="right-down" />
      <!-- 父容器的左右边框上的背景图片 -->
      <img class="leftBorder" src="@/assets/aiScreen/leftBorder.png" alt="left-border" />
      <img class="rightBorder" src="@/assets/aiScreen/rightBorder.png" alt="right-border" />
      <el-row type="flex" style="flex-direction: row; height: 100%;">
        <el-col class="leftBg" :span="6" style="margin: 2px 0 15px 20px;">
          <div class="leftBox">
            <libStatus ref="libStatus"></libStatus>
            <staffRank ref="staffRank" :days="days"></staffRank>
            <libIncrease :barchartData="barchartData"></libIncrease>
            <perfAnalysis :chartData="chartData1"></perfAnalysis>
            <!-- <categoryStats></categoryStats> -->
          </div>
        </el-col>
        <el-col :span="12" style="margin: 5px 10px 14px;">
          <div class="centerBox">
            <deepSeekCall ref="deepSeekCall"></deepSeekCall>
            <latestInquiry ref="latestInquiry" :days="days"></latestInquiry>
          </div>
        </el-col>
        <el-col class="rightBg" :span="6" style="margin: 2px 20px 15px 0;">
          <div class="rightBox">
            <assetHealth ref="assetHealth"></assetHealth>
            <employeeRank :chartData="chartData2"></employeeRank>
            <deviceStatus ref="deviceStatus"></deviceStatus>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { parseTime } from "@/utils/index.js";
import { connrequest2, login2 } from "@/api/firstPage.js"
import { setToken } from '@/utils/auth'
import top from './components/top.vue'
import libStatus from './components/libStatus.vue'
import staffRank from './components/staffRank.vue'
import perfAnalysis from './components/perfAnalysis.vue'
import assetHealth from './components/assetHealth.vue'
import deepSeekTrain from './components/deepSeekTrain.vue'
import libIncrease from './components/libIncrease.vue'
import deepSeekCall from './components/deepSeekCall.vue'
import latestInquiry from './components/latestInquiry.vue'
import netAcceleration from './components/netAcceleration.vue'
import employeeRank from './components/employeeRank.vue'
import deviceStatus from './components/deviceStatus.vue'
// import categoryStats from './components/categoryStats.vue'
export default {
  name: "aiScreen",
  components: {
    top,
    libStatus,
    staffRank,
    perfAnalysis,
    assetHealth,
    deepSeekTrain,
    libIncrease,
    deepSeekCall,
    latestInquiry,
    netAcceleration,
    employeeRank,
    deviceStatus
    // categoryStats,
  },
  props: {
  },
  data() {
    return {
      projectName: '',
      days: 7,
      chartData1: [
        { Name: '沟通回溯', Count: 0 },
        { Name: '屏幕录像', Count: 0 },
        { Name: '域名解析', Count: 0 },
        { Name: '绩效分析', Count: 0 },
        { Name: '工作流水', Count: 0 },
      ],
      chartData2: {},
      barchartData: { xAxis: [], series: [] },
      timer: null // 添加 timer 属性
    }
  },
  created() { 
    this.projectName = `${Glod.projectName}监测中心` 
  },
  mounted() {
    if (this.$route.query.key !== undefined && this.$route.query.key !== null && this.$route.query.key !== '') {
      this.getToken()
    } else {
      this.getinitData()
    }
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  watch: {},
  computed: {},
  methods: {
    async getinitData() {
      const data = {
        Filter: {
          FileName: 'param_assetPanorama.json'
        }
      };
      const res = await connrequest2('GetUICommonParam', data);
      this.days = res.Data.days
      if (res && res.Data) {
        // 立即执行第一次请求
        this.executeRequests();
        // 设置定时器，每隔指定秒数执行一次请求
        this.timer = setInterval(() => {
          this.executeRequests();
        }, res.Data.CatInterval * 1000);
      }
    },
    // 提取请求方法到一个独立函数
    executeRequests() {
      this.GetLogsum();
      this.GetEventLogSumGroupByDate();
      this.$refs.libStatus.initData();
      this.$refs.staffRank.getData();
      this.$refs.deepSeekCall.initData();
      this.$refs.latestInquiry.getData();
      this.$refs.assetHealth.initChart();
      this.$refs.deviceStatus.CenterGetFirstPage();
    },
    async getToken() {
      const data = {
        Data: {
          Password: this.$route.query.key,
          FileName: 'param_assetPanorama.json'
        }
      }
      const res = await login2('LoginDP', data)
      await setToken(res.Token)
      this.getinitData()
    },
    async GetLogsum() {
      let endTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
      let startTime = endTime - (this.days * 1 * 3600 * 24 * 1000);
      const data = {
        Filter: {
          StartTime: parseTime(startTime),
          EndTime: '',
        }
      }
      const res = await connrequest2('GetLogSum', data)
      this.chartData1 = [
        { Name: '沟通回溯', Count: res.Data.ChatRecordLog },
        { Name: '屏幕录像', Count: res.Data.ScreenLog },
        { Name: '域名解析', Count: res.Data.SysmonDnsLog },
        { Name: '绩效分析', Count: res.Data.WindowProcLog },
        { Name: '工作流水', Count: res.Data.WorkFlowLog },
      ]
      this.chartData2 = {
        EventLog: res.Data.EventLog,
        Software: res.Data.Software,
        FileVirusCheck: res.Data.FileVirusCheck,
        InstallApp: res.Data.InstallApp,
        sum_sysmon_connect_log: res.Data.sum_sysmon_connect_log,
        ShareDir: res.Data.ShareDir,
        OpenPorts: res.Data.OpenPorts,
        AutoStartup: res.Data.AutoStartup,
      }
    },
    // 获取事件日期统计
    async GetEventLogSumGroupByDate() {
      let endTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
      let startTime = endTime - (this.days * 1 * 3600 * 24 * 1000);
      let xAxis = []
      let t1 = []
      let t2 = []
      let t3 = []
      let t4 = []
      let t5 = []
      const data = {
        Filter: {
          StartTime: parseTime(startTime),
          EndTime: parseTime(endTime),
        }
      }
      const res = await connrequest2('GetEventLogSumGroupByDate', data)
      res.Data = res.Data || []
      res.Data.map(item => {
        xAxis.push(item.TransDate)
        t1.push(item[1])
        t2.push(item[2])
        t3.push(item[3])
        t4.push(item[4])
        t5.push(item[5])
      })
      this.barchartData = { xAxis, t1, t2, t3, t4, t5 }
    },
  },
}
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #031d31;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.bottom {
  position: relative;
  /* background-color: aqua; */
  flex: 1;
}

.leftUp {
  position: absolute;
  z-index: 999;
  left: 0;
  top: -20px;
}

.leftDown {
  position: absolute;
  z-index: 999;
  bottom: 0;
  left: 0;
}

.rightUp {
  position: absolute;
  z-index: 999;
  top: -20px;
  right: 0;
}

.rightDown {
  position: absolute;
  z-index: 999;
  bottom: 0;
  right: 0;
}

.leftBorder {
  position: absolute;
  z-index: 999;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.rightBorder {
  position: absolute;
  z-index: 999;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
}

.leftBg {
  background-image: url('../../assets/aiScreen/bg1.png');
  /* 使用绝对路径引用背景图片 */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.rightBg {
  background-image: url('../../assets/aiScreen/bg1.png');
  /* 使用绝对路径引用背景图片 */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.leftBox {
  display: flex;
  flex-direction: column;
  padding-right: 4px;
  height: 100%;
}

.centerBox {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rightBox {
  display: flex;
  flex-direction: column;
  padding-right: 4px;
  height: 100%;
}

/* 自定义滚动条 */
::v-deep ::-webkit-scrollbar {
  width: 2px;
  /* 滚动条宽度 */
}

::v-deep ::-webkit-scrollbar-track {
  background: #1a2b3c;
  /* 轨道背景色，深色调与 #031d31 协调 */
  border-radius: 2px;
}

::v-deep ::-webkit-scrollbar-thumb {
  background: #4a90e2;
  /* 滑块颜色，浅蓝色高对比 */
  border-radius: 2px;
}

::v-deep ::-webkit-scrollbar-thumb:hover {
  background: #357abd;
  /* 悬停时颜色稍暗 */
}
</style>